<template>
  <div>
    <span>这是一个helloworld</span>
    <p>
      文本插值:{{ message }}
      <br>
      原始html:<var v-html="baidulink"></var>
      <br>
      Attribute 绑定
      <span :class="attr">测试绑定</span>
      <br>
      <span :id="id01">id绑定</span>
      <br>
      <span>也可以使用表达式:{{flag?'flag是true':'flag是false'}}</span>
      <br>
      <span>也可以使用表达式:{{name.substring(0,3)}}</span>
      <br>
      <a :href="bindhref">这是百度的地址</a>
    </p>
    <p>refval: {{refval+1}}</p>
    <p>
      <button @click="increment">
        count:{{count}}
      </button>
    </p>
    <button @click="alertTest" value="点击提示">  点击提示    </button>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  setup(){
    const count = ref(10)

    function increment(){
      count.value++
      console.log(count.value)
    }

    function alertTest() {
      alert(11111);
    }

    return {
      message:ref(100),
      baidulink: '<a href=\'https://www.baidu.com\'>百度</a>',
      attr: 'testClass',
      id01: 'testbindid',
      name: 'zouyang',
      bindhref: 'http://www.baidu.com',
      refval: ref(10),
      count,
      increment,
      alertTest
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
template div p span{
  font-style: oblique;
}
.testClass{
  color: red
}
#testbindid{
  font: italic 20px "Times New Roman",Georgia,Serif
}
</style>
